<template>
  <div class="">
    <el-breadcrumb>
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item v-breadcrumb-certify></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content">
      <cellbox middle class="coach-manage">
        <cell-item>
          <heading grade='1'>赞助品牌</heading>
        </cell-item>
        <cell-item class="tr small weak" >
          <el-button class="orange-btn" @click="edit()">新增赞助品牌</el-button>
        </cell-item>
      </cellbox>
      <div v-if="!brand_list.list || brand_list.list.length>0">
        <template>
          <el-table
            :data="brand_list.list"
            stripe
            style="width: 100%">
            <el-table-column
              label="品牌Logo"
              width="180">
              <template scope="scope">
                <div class="brand-logo">
                   <img :src="scope.row.brandLogo"/>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="brandName"
              label="品牌名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="brandNames"
              label="品牌类型"
              width="250">
            </el-table-column>
            <el-table-column
              prop="contactOpen"
              label="审核状态">
              <template scope="scope">
                {{ scope.row.auditStatus | sponsorStatus}}
              </template>
            </el-table-column>
            <el-table-column
              label="操作">
              <template scope="scope">
                <el-button type="text" size="small" @click="edit(scope.row.id)" :disabled="scope.row.auditStatus == 1">修改</el-button>
                <el-button type="text" size="small" @click="del(scope.row.id)" :disabled="scope.row.auditStatus == 1">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <placeholder v-else text="当前没有收到消息哦" src="/static/images/sponsor/nodata_brand.png">
        <el-button class="orange-btn" @click="edit()" slot="button">增加赞助品牌</el-button>
      </placeholder>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import api from 'api/brand'
import { pagingList } from 'utils/mixins'
export default {
  mixins: [pagingList],
  data () {
    let isCertify
    return {
      isCertify,
      query: this.getQuery() // 分页
    }
  },
  computed: {
    ...mapGetters({
      brand_list: 'brand_list'
    })
  },
  created () {
    this.brandList()
  },
  methods: {
    brandList () { // 品牌列表数据
      this.$store.dispatch('brand_list', this.query)
    },
    edit (id) {
      if (!id) { // 没有id参数的edit方法是添加操作
        if (this.brand_list.list.length >= 10) {
          this.$confirm('抱歉，最多只能添加10个品牌哦', '提示', {
            showCancelButton: false,
            type: 'warning'
          })
          return
        }
        this.$router.push({path: '/sponsor/brand/add'})
      } else { // 带有id参数的edit方法是编辑操作
        this.$router.push({path: '/sponsor/brand/edit/' + id})
      }
    },
    del (id) { // 操作当前条品牌信息
      this.$confirm('此操作将永久删除该品牌, 是否继续?', '提示', {
        type: 'warning'
      }).then(() => {
        // 执行删除接口
        api.brand_del({
          brandId: id
        }).then(res => {
          this.$message('删除成功')
          this.brandList() // 删除成功后，重新加载一下页面数据
        }, () => {
          this.$message.error('删除失败')
        })
      }).catch(() => {
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '~styles/var.scss';
  .brand-logo{
    width:130px;
    height:60px;
    line-height:60px;
    padding: 5px 0px;
    box-sizing: border-box;
    img{
      max-width:100%;
      max-height:100%;
      vertical-align:inherit;
    }
  }
  .orange-btn{
    background: $orange;
    border-color: $orange;
    color: #ffffff;
    margin:20px 0px;
    &:hover {
      color: $orange;
      background: #ffffff;
    }
  }
</style>
